<template>
  <header class="header">
    <div class="header__left">
      <div class="logo">
        <img src="@/assets/images/logo.png" alt="" />
      </div>
      <cc-lang></cc-lang>
    </div>
    <div class="request-use" v-show="tabLogin" @click="tabLogin = false">
      <i class="iconfont ic-user-edit"></i>
      {{ $t("login.hedaer.applyBtn") }}
    </div>
    <div class="request-use" v-show="!tabLogin" @click="tabLogin = true">
      <i class="iconfont ic-worker-fill"></i>
      {{ $t("login.hedaer.loginBtn") }}
    </div>
  </header>
  <main>
    <div class="left-img" v-show="tabLogin">
      <img src="@/assets/images/login-img.png" alt="" />
    </div>
    <div class="login" v-show="tabLogin">
      <login-pwd></login-pwd>
    </div>
    <div class="register" v-if="!tabLogin">
      <component
        :is="currentTabComponent"
        @nextStep="nextStep"
        :mobile-info="mobileInfo"
      />
    </div>
  </main>
  <!-- <button @click="useLogin.getInfos">获取信息</button> -->
</template>

<script setup>
import router from "@/router/index";
import LoginPwd from "./components/login-pwd/index.vue";
import RequestUse from "./components/request-use/index.vue";
import { ref, defineAsyncComponent, reactive } from "vue";
import { CcLang } from "@/components";
const currentTabComponent = ref(RequestUse);
const mobileInfo = reactive({});
function nextStep(data, mobile) {
  currentTabComponent.value = defineAsyncComponent(() =>
    import(`./components/${data}/index.vue`),
  );
  mobileInfo.prefix = mobile.prefix;
  mobileInfo.number = mobile.number;
}

//注册登录切换
const tabLogin = ref(true);
if (window.localStorage.getItem("autoLogin")) {
  router.push({
    path: "/data-lake",
  });
}
</script>
<script>
export default {
  data() {
    return {
      key: new Date().getTime(),
    };
  },
};
</script>
<style lang="scss" scoped>
.header {
  height: 72px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 6px 0 rgba(141, 145, 154, 0.16);
  padding: 0 24px;
  @include flex-x-between-y-center;
  position: relative;
  &__left {
    @include flex-y-center;
  }

  .logo {
    width: 196px;
    img {
      width: 100%;
    }
  }
  .request-use {
    width: 112px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 2px;
    background: rgba(96, 66, 220, 1);
    color: #fff;
    cursor: pointer;
    i {
      margin-right: 5px;
    }
  }
}
main {
  width: 100%;
  height: calc(100vh - 72px);
  position: relative;
  background: url(@/assets/images/loginbg.png);
  .left-img {
    width: 800px;
    height: 548px;
    position: absolute;
    top: 148px;
    left: 185px;
    img {
      width: 100%;
    }
  }
  .login {
    width: 520px;
    height: 550px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 24px 0 rgba(78, 89, 105, 0.12);
    position: absolute;
    right: 288px;
    top: 120px;
  }
  .register {
    width: 688px;
    min-height: 576px;
    border-radius: 8px;
    border: 1px solid map-get($map: $stroke-color, $key: common);
    background: #fff;
    @include absolute-x-y-center;
  }
}
</style>
